<template>
  <div>
    <h2>{{ counter }}</h2>
    <h2>{{ doubleCounter }}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>

    <h2>{{ data }}</h2>
    <button @click="changeData">修改data</button>

    <p class="content"></p>

    <div class="scroll">
      <div class="scroll-x">scrollX: {{ scrollX }}</div>
      <div class="scroll-y">scrollY: {{ scrollY }}</div>
    </div>

    <div class="mouse">
      <div class="mouse-x">mouseX: {{ mouseX }}</div>
      <div class="mouse-y">mouseY: {{ mouseY }}</div>
    </div>
  </div>
</template>

<script>
import {
  useCounter,
  useTitle,
  useScrollPosition,
  useMousePosition,
  useLocalStorage,
} from "./hooks";

export default {
  // data() {
  //   return {
  //     counter: 0,
  //   };
  // },
  // computed: {
  //   doubleCounter() {
  //     return this.counter * 2;
  //   },
  // },
  // methods: {
  //   increment() {
  //     this.counter++;
  //   },
  //   decrement() {
  //     this.counter--;
  //   },
  // },

  setup() {
    //计数器
    const { counter, doubleCounter, increment, decrement } = useCounter();

    //title
    const titleRef = useTitle("哈哈哈");
    setTimeout(() => {
      titleRef.value = "pengfanBlog";
    }, 3000);

    //滚动位置
    const { scrollX, scrollY } = useScrollPosition();

    //鼠标位置
    const { mouseX, mouseY } = useMousePosition();

    //LocalStorage
    const data = useLocalStorage("info");
    const changeData = () => {
      data.value.name = "pengyutong";
    };

    return {
      counter,
      doubleCounter,
      increment,
      decrement,

      scrollX,
      scrollY,

      mouseX,
      mouseY,

      data,
      changeData,
    };
  },
};
</script>

<style scoped>
.content {
  width: 3000px;
  height: 5000px;
}
.scroll {
  position: fixed;
  right: 30px;
  bottom: 30px;
}

.mouse {
  position: fixed;
  right: 30px;
  bottom: 80px;
}
</style>